<template>
  <div class="container">
    <div class="basepadding">客户售后平台</div>

    <div class="basepadding" style="display: flex">
      <el-button class="bigbtn" type="primary" @click="AfterListfn()">
        维修情况
      </el-button>
      <el-button class="bigbtn" type="primary" @click="AfterList1fn()">
        设备巡检
      </el-button>
      <el-button class="bigbtn" type="primary" @click="AfterListCfgfn()">
        站点配置
      </el-button>
      <el-button class="bigbtn" type="primary" @click="utype22fn()">
        维修人员
      </el-button>
    </div>
    <div v-if="page == 'utype22'" class="basepadding">
      <div class="basepadding" style="background: rgba(255, 255, 255, 0.1)">
        <z-from
          ref="searchfrom"
          :inline="true"
          label-position="left"
          label-width="100px"
          :nowinputs="Aftersearchinputs"
          size="small"
          @change="searchchange()"
        />
      </div>
    </div>
    <div
      v-if="page == 'page'"
      class="basepadding"
      style="display: flex; justify-content: space-between; align-items: center"
    >
      维修情况
      <el-button type="primary" @click="AfterListXJpdgtelfn()">派单</el-button>
    </div>

    <div
      v-if="page == 'page1'"
      class="basepadding"
      style="display: flex; justify-content: space-between; align-items: center"
    >
      巡检派单
      <el-button type="primary" @click="AfterListXJpdfn()">派单</el-button>
    </div>
    <div class="basepadding">
      <z-table
        v-if="!tableloading"
        ref="tablez"
        v-loading="tableloading"
        :datas="After"
        :delsbtn="false"
        :seachfalg="page == 'page' || page == 'page1' ? true : false"
        :tablecolumn="tablecolumn"
      >
        <!-- @delfn="delfn" -->
        <template #setting="setting">
          <el-table-column
            align="center"
            :label="setting.itemdata.label"
            :prop="setting.itemdata.value"
          >
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="afterListedtfn(scope.row)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </template>
        <template #settinguser>
          <el-table-column type="expand">
            <template #default="scope">
              <div style="height: 200px">
                <el-scrollbar>
                  <z-table
                    :datas="scope.row.AfterList"
                    style="background: none"
                    :tablecolumn="tablecolumn22child"
                  />
                </el-scrollbar>
              </div>
            </template>
          </el-table-column>
        </template>
      </z-table>
    </div>
    <detailed ref="detailed" />
    <after-list-cfg ref="afterListCfg" />
    <afterlistxjpd ref="afterlistxjpd" />
    <after-listedt ref="afterListedt" />
    <afterListedt22 ref="afterListedt22" />
    <afterlistedtuuser ref="afterlistedtuuser" />
    <listxjpd ref="listxjpd" />
    <afterlistxjpduuser ref="afterlistxjpduuser" />
  </div>
</template>
<script>
  import {
    tablecolumn,
    tablecolumn22,
    tablecolumn1,
    Aftersearchinputs22,
    tablecolumn22child,
  } from '@/json/After.js'
  import zFrom from '../../components/zFrom/zFrom'
  import zTable from '../../components/zTable/index'

  import afterlistxjpd from './components/AfterListXJpd'
  import afterListCfg from './components/AfterListCfg'
  import AfterListedt from './components/AfterListedt'
  import afterListedt22 from './components/afterListedt22'
  import afterlistedtuuser from './components/AfterListedtuUser.vue'
  import listxjpd from './components/listxjpd.vue'
  import afterlistxjpduuser from './components/AfterListXJpduUser.vue'

  import detailed from './components/AfterListDetailed.vue'
  export default {
    name: 'After',
    components: {
      zFrom,
      listxjpd,
      zTable,
      afterListCfg,
      afterlistxjpd,
      AfterListedt,
      afterListedt22,
      afterlistedtuuser,
      detailed,
      afterlistxjpduuser,
    },
    data() {
      return {
        dialogfalg: false,
        edtbtnloading: false,
        nowdata: {},
        nowinputs: {},
        dialogtitle: '',
        After: [],
        updatas: [],
        tablecolumn,
        tablecolumn1,
        tableloading: false,
        page: 'page',
        USearch22: [],
        Station: [],
        tablecolumn22child,
        selects: {
          gzdm: [
            { label: '三天无人使用', value: '1' },
            { label: '三天充电异常', value: '2' },
            { label: '离线三小时', value: '3' },
            { label: '继电器异常', value: '4' },
          ],
        },
        USearchAfterList: [],
        ChargeCar: [],
      }
    },
    async mounted() {
      let Station = await this.$z.$axios.post('/Station')
      this.Station = Station.data
      this.$store.commit('station/setStation', Station.data)
      tablecolumn1[2].type = 'select'
      tablecolumn1[2].option = this.Station.map(function (e) {
        return { label: e.pcs, value: e.id }
      })
      tablecolumn[3].type = 'select'
      tablecolumn[3].option = this.Station.map(function (e) {
        return { label: e.pcs, value: e.id }
      })
      tablecolumn22child[3].type = 'select'
      tablecolumn22child[3].option = this.Station.map(function (e) {
        return { label: e.pcs, value: e.id }
      })

      this.AfterListfn()
    },
    methods: {
      async AfterListXJpdgtelfn() {
        let gtels = await this.$refs.tablez.handleSelects
        if (gtels.length == 0) {
          return
        }
        this.$refs.afterlistedtuuser.show(gtels, () => {
          this.AfterListfn()
        })
      },
      async AfterListfn() {
        this.page = 'page'
        this.tableloading = true
        let data = await this.$z.$axios.post('/AfterList', { type: 0 })
        data.data = data.data
          .map(function (e) {
            return { ...e, pdqk: e.uUser == '' || !e.uUser ? '0' : '1' }
          })
          .filter(function (e) {
            return e.ztwx == 0 || e.ztwx == 2
          })

        data.data = data.data.sort(function (a, b) {
          return -a.gzdm.length + b.gzdm.length
        })
        this.updatas = data.data
        this.tablecolumn = tablecolumn
        this.After = data.data

        this.tableloading = false
      },
      async AfterList1fn() {
        this.page = 'page1'
        this.tableloading = true
        let ChargeCar = this.ChargeCar
        if (ChargeCar.length == 0) {
          ChargeCar = await this.$z.$axios.post('/ChargeCar')
          ChargeCar = ChargeCar.data
        }
        let AfterList = await this.$z.$axios.post('/AfterList', { type: 1 })
        AfterList = AfterList.data
        let AfterListselect = {}
        AfterList.forEach(function (e) {
          AfterListselect[e.gtel] = e
        })
        let pagedata = ChargeCar.map((e) => {
          let r = {}
          let AfterListdq = AfterListselect[e.gtel]
          if (AfterListdq) {
            r = {
              ...AfterListdq,
              sjc2:
                this.$z.timefn.getUTCtime(AfterListdq.sjc, '', 60 * 60 * 24) +
                '天',
            }
          } else {
            r = {
              ...e,
              sjc: this.$z.timefn.gettime(0, e.sjc),
              sjc2: this.$z.timefn.getUTCtime(e.sjc, '', 60 * 60 * 24) + '天',
            }
          }
          return r
        }).sort((a, b) => {
          return this.$z.timefn.getUTCtime(b.sjc, a.sjc)
        })

        this.updatas = pagedata

        this.tablecolumn = tablecolumn1
        this.After = pagedata
        this.tableloading = false
      },
      async utype22fn() {
        this.tableloading = true

        let { data } = await this.$z.$axios.post('/USearchDetailed', {
          sutype: `utype in (22)`,
        })
        let AfterList = await this.$z.$axios.post('/AfterList')
        AfterList = AfterList.data
        this.USearchdata = data
        this.USearchAfterList = AfterList
        Aftersearchinputs22[1].type = 'select'
        Aftersearchinputs22[1].option = data.map(function (e) {
          return { label: e.uUser, value: e.uUser }
        })

        this.searchchange(true)
      },
      async searchchange(falg) {
        if (!(this.page == 'utype22' || falg)) {
          return falg
        }
        let searchdata = {}
        if (falg) {
          this.page = 'utype22'
        } else {
          searchdata = await this.$refs.searchfrom.validate()
        }
        if (searchdata.sjs == searchdata.sje) {
          delete searchdata.sjs
          delete searchdata.sje
        }
        let AfterList = this.USearchAfterList.filter((e) => {
          if (searchdata.sjs) {
            let num = this.$z.timefn.getUTCtime(searchdata.sjs, e.sjc)

            if (num <= 0) {
              return false
            }
          }
          if (searchdata.sje) {
            let num = this.$z.timefn.getUTCtime(searchdata.sje, e.sjc)

            if (num >= 0) {
              return false
            }
          }
          if (searchdata.uUser) {
            if (e.uUser != searchdata.uUser) {
              return false
            }
          }
          return true
        })
        let USearchdata = this.USearchdata.filter((e) => {
          return !searchdata.uUser || e.uUser == searchdata.uUser
        })
        let USearch22 = []
        USearchdata.forEach((e) => {
          let AfterListdq = AfterList.filter(function (f) {
            return f.uUser == e.uUser
          })
          AfterListdq = AfterListdq.sort((a, b) => {
            return this.$z.timefn.getUTCtime(a.sjc, b.sjc)
          })
          e.AfterList = AfterListdq
          e.pds = AfterListdq.length
          e.wcs = AfterListdq.filter(function (f) {
            return f.ztwx == 1
          }).length
          e.wwc = AfterListdq.filter(function (f) {
            return f.ztwx != 1
          }).length
          e.sj = `${AfterList[AfterList.length - 1].sjc}    ${AfterList[0].sjc}`
          // e.pds="12"
          USearch22.push(e)
        })

        this.tablecolumn = tablecolumn22
        this.Aftersearchinputs = Aftersearchinputs22
        this.updatas = this.$z.deepClone(USearch22)
        this.After = this.$z.deepClone(USearch22)

        this.tableloading = false
      },
      searchfn() {
        this.$refs.searchfrom.validate().then((updata) => {})
      },
      deletesearchfn() {
        this.searchdata = {}
        this.$refs.searchfrom.settingfn()
        this.After = this.$z.deepClone(this.updatas)
      },

      AfterListCfgfn() {
        this.$refs.afterListCfg.show()
      },
      async AfterListXJpdfn() {
        let gtels = await this.$refs.tablez.handleSelects
        if (gtels.length == 0) {
          return
        }
        this.$refs.afterlistxjpduuser.show(gtels, () => {
          this.AfterList1fn()
        })
        // this.$refs.afterlistxjpd.show([], () => {
        //   this.AfterList1fn()
        // })
      },
      afterListedtfn(scope = {}) {
        if (this.page == 'page') {
          let data = scope[Symbol.for('data')]
          this.$refs.detailed.show(data)
          // this.$refs.afterListedt.show(data, () => {
          //   this.AfterListfn()
          // })
        } else {
          let data = scope[Symbol.for('data')]
          this.$refs.afterListedt22.show(data)
        }
      },

      openfn() {},
      closedfn() {},
      async updatafn() {
        let updata = await this.$refs.from.validate()

        this.edtbtnloading = true
        let url = updata.id ? '/Afteredt' : '/Afteradd'
        let { data } = await this.$z.$axios.post(url, updata).catch(() => {
          this.edtbtnloading = false
        })
        let par = this.$z.parfn(data)
        if (par.value == 'succeed') {
          this.$message.success(par.label)
          this.edtdialogfalg = false
          this.getdata()
        } else {
          this.$message.error(par.label)
        }
        this.edtbtnloading = false
        this.dialogfalg = false
      },
      async gtelblur(gtel) {
        if (!gtel || gtel == '') {
          return
        }
        let { data } = await this.$z.$axios.post('/ChargeCar', { gtel })
        if (data.length == 1) {
          this.$refs.from.forcesetformdatafn({ mc: data[0].mc })
          let Stationdata = await this.$z.$axios.post('/Station', {
            id: data[0].pcs,
          })
          data = Stationdata.data
          if (data.length == '1') {
            this.$refs.from.forcesetformdatafn({ pcs: data[0].pcs })
          }
        }
      },
      async delfn(datas = []) {
        datas.forEach(async (e) => {
          await this.$z.$axios.post('/Afterdel', { id: e.id })
        })
        this.getdata()
      },
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/tablecss.scss';
  .bigbtn {
    height: 70px;
    padding: 0 60px;
    font-size: 28px;
    margin-right: 60px;
  }
</style>
